<script>
    export default {
        name: 'User',
        data() {
            return {
                dialogVisible: false,
                form: {
                    name: '',
                    age: '',
                    sex: '',
                    birth: '',
                    addr: ''
                },
                rules: {
                    name: [
                        {
                            required: true,
                            message: '请输入姓名'
                        }
                    ],
                    age: [
                        {
                            required: true,
                            message: '请输入年龄'
                        }
                    ],
                    sex: [
                        {
                            required: true,
                            message: '请选择性别'
                        }
                    ],
                    birth: [
                        {
                            required: true,
                            message: '请选择出生日期'
                        }
                    ],
                    addr: [
                        {
                            required: true,
                            message: '请输入地址'
                        }
                    ]
                }
            }
        },
        methods: {
            // 提交用户表单
            submit() {
                this.$refs.form.validate((valid) => {
                    // console.log(valid);
                    if (valid) {
                        // 后续对表单数据的处理
                        console.log(this.form);

                        // 清空表单的数据
                        this.$refs.form.resetFields();
                        // 关闭弹窗
                        this.dialogVisible = false;
                    }
                })
            },
            // 弹唱关闭的时候
            handleClose() {
                this.$refs.form.resetFields();
                this.dialogVisible = false;
            },
            // 点击取消
            cancel() {
                this.handleClose();
            }
        }
    }
</script>

<template>
    <div class="manage">
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose">
            <!--用户的表单信息-->
            <el-form ref="form" :rules="rules" :model="form" label-width="80px" :inline="true">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model="form.age" placeholder="请输入年龄"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select v-model="form.sex" placeholder="请选择">
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出生日期" prop="birth">
                    <el-date-picker
                        type="date"
                        placeholder="选择日期"
                        v-model="form.birth"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="地址" prop="addr">
                    <el-input v-model="form.addr" placeholder="请输入地址"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
        <div class="manage-header">
            <el-button @click="dialogVisible=true" type="primary">
                + 新增
            </el-button>
        </div>
    </div>
</template>

<style scoped lang="less">

</style>